本文內容

本文為閱讀 Angular 的 Route 其中一項設定 pathMath 的筆記內容。

route

在 Angular 可以利用 route 來設定不同的路由路徑，應該要對應到什麼元件的內容。
route 是一個物件，它有很多屬性可以設定，都跟路由的應用有關，而大致上常用的為以下幾個:
path: 路由路徑
pathMatch: 路由路徑要以什麼樣的規則，來決定是否符合 path 的內容。可以設定的值有兩個: prefix 和 full。
component: 用來指定當符合該路由路徑時，要呈現哪一個元件的內容
redirectTo: 會被重新導向哪一個路由路徑

route 詳細可以設定的屬性，都在官方文件可以找到，這邊就先不一一列出來了。

pathMatch

本篇會特別紀錄有關 route 的 pathMatch 的用法。
承如上面所說，pathMatch 是設定路由路徑要以什麼樣的規則，來判定該路徑符合 path 的內容。
它有兩個屬性值可以設定，分別為 prefix 和 full。 預設值為 prefix。

路由路徑機制

假設今天，我在本地端開發，有一個路徑長得像這樣
http://localhost:4200/users/Johnny/permission?from=134#section
先來解析一下這個路徑，看看，哪個部分才會被 Angular 拿來作為 route 比對的對象

1. 最前面的 baseUrl: http://localhost:4200 不會被拿來作為 route 比對的對象
2. 最後面接的內容，?from=134#section 是 queryParameter 也是不會用來作為 route 比對的對象，這部分的功能通常會用在要丟資料給後端，告訴他們我們想要訂資料的內容時會用到。

好，將以上說到不會被拿來比對的內容剔除後，路由路徑只剩下 /users/Johnny/permission ，這部分就是會被 Angular 來拿作為 route 比對的對象。

路由比對機制

1. Angular 會把以上擷取完的路徑切成幾個獨立的部分，分別為 users, Johnny, permission 這三個部分，按照順序一個一個進行比對，也就是說先比對 users，接著，比對 Johnny，最後，比對 permission。
2. Anuglar 中的 Router 本身是一個樹狀結構。在這個樹狀結構上，會分布不同的 route 物件，然後，每一個 route 物件又可能有自己的 children node ，繼續開支散葉下去。
   
3. 最終，Angular 會希望找到完全符合當下路由路徑內容的路由設定，以我們這邊的範例為例，Angular 會希望找到完全符合 /users/Johnny/permission 路徑的路由設定，假若，你的路由設定是符合 /users/Johnny 或者 /users/Johnny/permission/location，多一個或少一個，都是不被允許的，要完全符合才行。

Summary

這邊做個總結

1. 我們可以透過 route 物件來設定，路由規則，與該路由路徑會對應到的元件內容。
2. pathMatch 的屬性值，有兩個可以設定 prefix 和 full，預設值為 prefix。
3. Angular 會將路由路徑以 / 為切分的斷點，並一個一個比對被切分出來的路由路徑。

Reference

1. Angular - explain pathMath configuration
2. Angular - Route - pathMath - official Docs